<template>
  <div>
    <MyHeader></MyHeader>
    <div align="center" class="pay">
      <!--    hhhh
          {{this.orderPrice}}
          {{this.orderId}}-->
      <div v-if="isPay">
        <h2>选择支付方式</h2>
        <el-radio-group v-model="radio">
          <el-radio :label="0" value="0" >钱包支付</el-radio>
          <el-radio :label="1" value="1">支护宝支付</el-radio>
        </el-radio-group>
        <div>

        </div>
      </div>
      <div v-else>
        <h2>当前钱包余额不足，请使用支护宝支付</h2>
      </div>
      <div v-if="this.radio==0">
        当前余额：{{this.money}}<br/>
        <el-button @click="pay">立即支付</el-button>
      </div>
      <div v-if="this.isPay==false||this.radio==1">
        <img src="../static/img/linux就该这么学.png">
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Payment",
  data() {
    return {
      orderId: this.$route.params.orderId,
      orderPrice: this.$route.params.orderPrice,
      user: this.$store.getters.getUser,
      radio: 0,
      money: ' ',
      isPay: true
    }
  },
  methods:{
    pay(){
      var vm = this
      axios.get('http://localhost:8082/book-manager/user_money/pay?orderId='+vm.orderId+'&orderPrice='+vm.orderPrice+'userId'+vm.user.userid).then(function (resp){
        if(resp.data.flag=='success'){
          this.$message(resp.data.data)
        }else{
          this.$message(resp.data.data)
        }
      })
    }
  },
  created() {
    console.log(this.$route.params.orderId)
    var vm = this
    axios.get('http://localhost:8082/book-manager/user_money/selectByUserId/' + this.user.userid).then(function (resp) {
      console.log(resp.data)
      vm.money = resp.data
    })
  },
  mounted() {
    console.log(this.money)
    console.log(this.orderPrice)
    if (this.money < this.orderPrice) {
      this.isPay = true
    }
  }
}
</script>

<style scoped>
.pay {
  margin-top: 100px;
  min-height: 300px;
  margin-bottom: 50px;
}
</style>
